<template>
	<view>
		<view>
			<u-navbar :is-back="false" title="　" :border-bottom="false">
				<view class="u-flex u-row-right" style="width: 100%;">
					<!-- <view class="camera u-flex u-row-center">
						<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
					</view> -->
				</view>
			</u-navbar>
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="toLogin">
				<view class="u-m-r-10">
					<u-avatar size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-20">{{username}}</view>
					<!-- <view class="u-font-14 u-tips-color">微信号:gyyy</view> -->
				</view>
				<!-- <view class="u-m-l-10 u-p-10">
					<u-icon name="scan" color="#969799" size="28"></u-icon>
				</view> -->
				<view class="u-m-l-10 u-p-10">
					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
				</view>
			</view>

			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="rmb-circle" title="我的积分" @click="clickitem(1)"></u-cell-item>
					<u-cell-item icon="star" title="我的分享" @click="clickitem(2)"></u-cell-item>
					<u-cell-item icon="heart" title="我的收藏" @click="clickitem(3)"></u-cell-item>
					<u-cell-item icon="coupon" title="稍后阅读" @click="clickitem(4)"></u-cell-item>
					<u-cell-item icon="coupon" title="阅读历史" @click="clickitem(5)"></u-cell-item>
					<u-cell-item icon="heart" title="开源项目" @click="clickitem(6)"></u-cell-item>
					<u-cell-item icon="photo" title="关于作者" @click="clickitem(7)"></u-cell-item>
					<u-cell-item icon="setting" title="退出登录" @click="clickitem(9)"></u-cell-item>
				</u-cell-group>
			</view>

		</view>
		<u-tabbar v-model="current" :list="tabbar" :mid-button="false"></u-tabbar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'  //1、先引入vuex 中mapStates
	export default {
		computed: {
			tabbar() {
				return this.$store.state.tabbar
			},
			username(){
				return this.$store.state.username
			},
			hasLogin(){
				return this.$store.state.hasLogin  // 2、获取参数值
			}
		},
		data() {
			return {
				current: 1
			}
		},
		methods: {
			...mapMutations(['logout']),//3、vuex中定义的方法
			clickitem(index) {
				console.log(index);
				switch (index) {
					case 1:
						console.log(1);
						alert("我的积分")
						break;
					case 2:
						console.log(2);
						break;
					case 3:
						console.log("我的收藏");
						uni.navigateTo({
							url:'../mycollect/mycollect'
						})
						break;
					case 4:
						console.log(4);
						break;
					case 5:
						console.log(5);
						break;
					case 6:
						console.log(6);
						break;
					case 7:
						console.log(7);
						break;
					case 8:
						console.log(8);
						break;
					case 9:
						console.log(9);
						
						this.$u.get('user/logout/json').then((res) => {
							this.$refs.uToast.show({
								title: '退出登录',
								type: 'success',
								duration: 1000,
							});
							this.logout()//4、登录后数据 加到vuex中
							uni.clearStorageSync()
							console.log('成功');
							// console.log('pageIndex:'+this.pageIndex);
						}).catch((res) => {
							console.log('失败');
						})
						
						break;
				}

			},
			toLogin() {
			
				if(this.hasLogin){//从vuex中获取是否登录 3、使用参数值
					this.$refs.uToast.show({
						title: '已登录，显示用户信息',
						type: 'success',
						duration: 1000,
					});
					
				}else{
					console.log("去登录");
					uni.navigateTo({
						url: '../login/login'
					})
				}
			
			
				
				// uni.navigateTo({
				// 	url:"../pages/login/login"
				// })

			}
		}
	}
</script>

<style>
	.colortop {
		color: blue;
	}
</style>
